import logoPic from '../../assets/img/logo.png';
import styled from 'styled-components';


export const HeaderWrapper = styled.div`
    height: 56px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
`;

export const HeaderLeftWrapper = styled.div`
    width: 400px;
    height: 100%;
    display: flex;
    justify-content: center;
    .logo {
        width: 100px;
    background: url(${logoPic}) no-repeat;
    background-size: contain
    }
`;

export const HeaderMiddelWrapper = styled.div`
    display: flex;
    flex: 1;
    align-items: center;
    .middle_link {
        padding: 0 15px;
        text-decoration: none;
        line-height: 56px;
        height: 100%;
    }
    .active {
        color: #ea6f5a;
    }
    .icon {
        padding: 5px;
    }
    .iconfont {
        font-size: 22px;
    }
`;

export const HeaderRightWrapper = styled.div`
    display: flex;
    /* width: 400px; */
    justify-content: space-around;
    align-items: center;
    .login_link {
        padding: 0px 20px;
        text-decoration: none;
        height: 100%;
        line-height: 56px;
    }

    .font_style {
        height: 100%;
        background-color: transparent;
        padding: 0px 20px;
        cursor: pointer;
        text-align: center;
    }
    
    .register {
        color: #ea6f5a;
        line-height: 38px;
        border-radius: 19px;
        border: 1px solid #ec6149;
        padding: 0 15px;
        margin-right: 20px;
        text-decoration: none;
    }
`;

export const NavSearchWrapper = styled.div`
    /* display: flex; */
    margin-left: 20px;
    position: relative;
    .iconfont {
        position: absolute;
        right: 5px;
        bottom: 5px;
        width: 30px;
        line-height: 30px;  
        border-radius: 15px;
        text-align: center;
        /* background: red; */
        &.search_icon {
         color: white;
         background: #969696
        }
    }
`;


export const NavSearch = styled.input.attrs({
    placeholder: '搜索'
})`
    width: 160px;
    height: 38px;
    font-size: 14px;
    border-radius: 19px;
    background: #eee;
    padding: 0 30px 0 20px;
    /* margin-top: 9px;
    margin-left: 20px; */
    box-sizing: border-box;
    border: 1px solid #eee;
    &::placeholder {
        color: #999;
    }
    &.focused {
        width: 240px;
    }
    &.slide-enter {
        transition: all .2s ease-out;
    }
    &.slide-enter-active {
        width: 240px;
    }
    &.slide-exit {
       transition: all .2s ease-out;
    }
    &.slide-exit-active {
       width: 160px;
    }
`;


export const Button = styled.div`
    line-height: 38px;
    border-radius: 19px;
    border: 1px solid #ec6149;
    padding: 0 15px;
    margin-right: 20px;
    &.register {
        color: #ea6f5a;
    }
    &.write {
        background: #ea6f5a;
        color: white;
    }
`;